<template>
  <div style="">
<!--background-color: #F2F2F2-->
    <div>
      <div style="border: 1px;">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

          <el-menu-item index="1" ><img style="margin-left: 20px ;width: 150px;height: 50px" src="http://qpt0e0e6g.hb-bkt.clouddn.com/login.png"></el-menu-item>
          <el-menu-item index="2" style="margin-left: 10px;font-size: 18px"><a href="/">首页</a></el-menu-item>
          <el-menu-item index="3" style="margin-left: 10px;font-size: 18px">榜单</el-menu-item>
          <el-menu-item index="4"  style="margin-left: 10px;font-size: 18px">COS</el-menu-item>
          <el-menu-item index="5"  style="margin-left: 10px;font-size: 18px"><a href="/mvshare.vue">视频</a></el-menu-item>
          <el-menu-item index="6"  style="margin-left: 10px;font-size: 18px">问答</el-menu-item>
          <el-menu-item index="7">
            <el-input  style="width: 200px ;"
                       placeholder="搜索COS、视频、用户..."
                       v-model="input"
                       clearable >
            </el-input>  <el-button type="primary" @click="findEs()" style="height: 39px;" con="el-icon-search">搜索</el-button>
          </el-menu-item>
          <el-menu-item index="8"  style="margin-left: 65px;font-size: 18px"><router-link to="/login">登录</router-link></el-menu-item>
          <el-menu-item index="9"  style="margin-left: 5px;font-size: 18px"><router-link to="/regist">注册</router-link></el-menu-item>
          <el-dropdown index="10" style="margin-left: 10px ;" >
            <el-button style="background-color: #ff6fa2;width: 100px;height: 50px;">
              <i class="el-icon-finished el-icon--right"style="font-size: 20px;align-content: center;color: aliceblue">发布</i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-circle-plus" ><router-link to="/upload">图片</router-link></el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus" >视频</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-menu>
      </div>
    </div>
    <div style="height: 80px;">

    </div>
    <div  style="background-color: #F2F2F2">
      <div>
        <el-form ref="form" :model="PicShare" label-width="80px">
          <el-form-item style="margin-left: 600px" label-width="100px" label="标题">
            <el-input style="width: 100px;margin-right: 670px" v-model="PicShare.share_name"></el-input>
          </el-form-item>
          <el-form-item label="分享内容">
            <el-input  style="width: 1200px" v-model="PicShare.share_desc"></el-input>
          </el-form-item>

          <el-form-item label="图片1">
            <el-upload
              class="avatar-uploader"
              action="http://localhost/bcy-picshare/picShare/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="图片2">
            <el-upload
              class="avatar-uploader"
              action="http://localhost/bcy-picshare/picShare/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="图片3">
            <el-upload
              class="avatar-uploader"
              action="http://localhost/bcy-picshare/picShare/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess3"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="图片4">
            <el-upload
              class="avatar-uploader"
              action="http://localhost/bcy-picshare/picShare/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess4"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl4" :src="imageUrl4" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit()">提交分享</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>


    </div>

</template>

<script>
  import axios from 'axios';
  axios.defaults.withCredentials=true
  export default {
    data() {
      return {
        PicShare:{},
          imageUrl1: '',
          imageUrl2: '',
          imageUrl3: '',
          imageUrl4: '',
          activeIndex: '1',
          input: ''
      }
    },
    methods: {
      handleAvatarSuccess1(res, file) {
        this.imageUrl1 = URL.createObjectURL(file.raw);
        this.PicShare.pic1=res;
      },
      handleAvatarSuccess2(res, file) {
        this.imageUrl2 = URL.createObjectURL(file.raw);
        this.PicShare.pic2=res;
      },
      handleAvatarSuccess3(res, file) {
        this.imageUrl3 = URL.createObjectURL(file.raw);
        this.PicShare.pic3=res;
      },
      handleAvatarSuccess4(res, file) {
        this.imageUrl4 = URL.createObjectURL(file.raw);
        this.PicShare.pic4=res;

      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt10M = file.size / 1024 / 1024 < 10;

        if (!isLt10M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        return isJPG && isLt10M;
      },onSubmit:function () {
        axios.post("http://localhost/bcy-picshare/picShare/addShare",this.PicShare).then(res=>{
          if (res.data.code==200){
            alert("提交成功！");
            this.$router.push("/")
          }
          if (res.data.code==100) {
            alert("提交失败！")
          }
        })

      }
    }
  }
</script>

<style scoped>
  .el-header, .el-footer {

    color: #333;
    text-align: center;
    line-height: 60px;
  }
  /*.el-row {*/
  /*margin-bottom: 20px;*/
  /*&:last-child {*/
  /*margin-bottom: 0;*/
  /*}*/
  /*}*/
  .el-col {
    border-radius: 4px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .bg-purple {
  }
  .bg-purple-light {
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
  }
</style>
